<template>
	<div class='register_bg'>
		<div  class='register_form'>
			<h2  class=' text-center  mb28 '>供应链管理系统企业注册</h2>
			
			<a-form   :form="form"  @submit="handleSubmit"> 

				<a-form-item  label="企业名称"  :label-col="formItemLayout.labelCol"  :wrapper-col="formItemLayout.wrapperCol" >
					<a-input placeholder="请输入企业名称"  v-decorator="['name', baseform.name]" /> 
				</a-form-item>
				<a-form-item label="初始登录用户名"  :label-col="formItemLayout.labelCol"  :wrapper-col="formItemLayout.wrapperCol" >
					<a-input placeholder="请输入用户名"  v-decorator="['loginName', baseform.loginName]" /> 
				</a-form-item>
				<a-form-item label="密码"  :label-col="formItemLayout.labelCol"  :wrapper-col="formItemLayout.wrapperCol" >
					<a-input placeholder="请输入密码" type='password' v-decorator="['password', baseform.password]" /> 
				</a-form-item>  
			 	<a-form-item label="类型"  :label-col="formItemLayout.labelCol"  :wrapper-col="formItemLayout.wrapperCol" > 
					<a-radio-group  v-decorator="['supOrBuyer',baseform.supOrBuyer]" >
					    <a-radio  :value="1">供应商</a-radio>
					    <a-radio  :value="2" disabled>买方</a-radio> 
					    <a-radio  :value="3" disabled>供应商和买方</a-radio> 
					    <a-radio  :value="4" disabled>代理</a-radio> 
					</a-radio-group>
				</a-form-item> 
				<!-- <span style="padding-left: 25%; " class='color-red'>详细信息填写 
					<a-icon type="down-square" class='cursor' v-if='!detail_modal' @click='detail_modal=true'/>
					<a-icon type="up-square" class='cursor' v-if='detail_modal' @click='detail_modal=false'/>
				</span>  -->
			    <!-- <a-row  v-if='detail_modal'  class='mt12'> -->
				<a-form-item  label="地址" :label-col="formItemLayout.labelCol"  :wrapper-col="formItemLayout.wrapperCol" >
					<a-input placeholder="请输入地址"  v-decorator="['address',baseform.address]"/> 
				</a-form-item> 
				<a-form-item label="电话" :label-col="formItemLayout.labelCol"  :wrapper-col="formItemLayout.wrapperCol" >
					<a-input placeholder="请输入电话"   v-decorator="['phone',baseform.phone]"/> 
				</a-form-item> 
				<a-form-item label="邮箱" :label-col="formItemLayout.labelCol"  :wrapper-col="formItemLayout.wrapperCol" >
					<a-input placeholder="请输入邮箱"  v-decorator="['email',baseform.email]"/> 
				</a-form-item>   
				<a-form-item  label="联系人" :label-col="formItemLayout.labelCol"  :wrapper-col="formItemLayout.wrapperCol" >
					<a-input placeholder="请输入"  v-decorator="['contact',baseform.contact]" /> 
				</a-form-item>   
				<a-form-item label="联系人手机" :label-col="formItemLayout.labelCol"  :wrapper-col="formItemLayout.wrapperCol" >
					<a-input placeholder="请输入"  v-decorator="['mobile',baseform.mobile]"  @change='Re_verifyCode'/> 
				</a-form-item>
				<a-form-item label="图形验证码" :label-col="formItemLayout.labelCol"  :wrapper-col="formItemLayout.wrapperCol" >
					<a-input placeholder="请输入"  v-decorator="['captchaCode',baseform.captchaCode]"  style='width: 120px;margin-right: 20px;'  @change='Re_verifyCode'/>
					<img :src='captchaImg' alt='图形验证码'  height="40"  class='cursor mr20'  @click='change_captchaImg()'> 
					<a-icon type="redo"  @click='change_captchaImg()'/>
				</a-form-item> 
				<a-form-item label="手机验证码" :label-col="formItemLayout.labelCol"  :wrapper-col="formItemLayout.wrapperCol" >
					<a-input placeholder="请输入"  v-decorator="['verifyCode',baseform.verifyCode]" style='width: 120px;margin-right: 20px;'  /> 
					<a-button class='mr20' :disabled='verifyCode_disabled'  @click='get_verifyCode()' ><span v-if='Re_verifyCode_status'>{{reciprocal}}s后重新获取</span><span v-else>获取验证码</span></a-button>
					<a-tooltip  v-if='verifyCode_disabled'>
		                  <template slot="title">
		                    请确认输入手机号和图形验证码
		                  </template>
		                   <a-icon type="question-circle" />
		              </a-tooltip>
				</a-form-item>
				<a-form-item label="营业执照" :label-col="formItemLayout.labelCol"  :wrapper-col="formItemLayout.wrapperCol" > 
					<a-checkbox-group   v-decorator="['fileVOList',baseform.fileVOList]"  style='display: none;' />
					 <fileUpload   :fileList='fileData'  v-on:uploading='($event)=>{fileData = $event.fileList}'  v-on:done='finished_upload($event)' v-on:removeFile=' removeFile_fromList($event,fileData)'    ></fileUpload> 
				</a-form-item>

				<a-form-item  class='mt28' :wrapper-col="buttonItemLayout.wrapperCol" >
					<a-button type="primary"  html-type="submit"  class='mr20' style='background: #105DCE'> 提交 </a-button>
					<router-link to='/login'> <a-button > 取消</a-button></router-link>
				</a-form-item>
			</a-form>
		</div>
	</div>
</template>

<script >
import { register,getVerifyCode }  from  '@/api/common'
import fileUpload from '@/components/common/fileUpload'
export default {
	name:'register',
	data(){
		return { 
			/*form  布局*/
      		formLayout:'horizontal',
			baseform:{  
	      		name         : { rules: [{ required: true, message: '请输入名称' },{ whitespace : true ,message:'请勿输入空格'}]},
	      		loginName    : { rules: [{ required: true, message: '请输入' },{ whitespace : true ,message:'请勿输入空格'}]},
	      		password     : { rules: [{ required: true, message: '请输入' },{ whitespace : true ,message:'请勿输入空格'}]}, 
	      		supOrBuyer   : { rules: [{ required: true, message: '请选择' }]}, 
	      		address      : { rules: [{ required: true, message: '请输入' }]}, 
	      		phone        : { rules: [{ required: true, message: '请输入' }]}, 
	      		email        : { rules: [{ required: true, message: '请输入' }]}, 
	      		contact      : { rules: [{ required: true, message: '请输入' }]}, 
	      		mobile       : { rules: [{ required: true, message: '请输入' }]}, 
	      		captchaCode  : { rules: [{ required: true, message: '请输入' }]},  //图形验证码 v-model for_require_mobileCode
	      		verifyCode   : { rules: [{ required: true, message: '请输入' }]}, 
	      		fileVOList   : { initialValue : [] , rules: [{ required: true, message: '请输入' }]},  
	      	}, 
	      	fileData:[],//file_营业执照

	      	captchaImg:'', 
	      	random:null,//获取图片验证码 和短信验证码 的同一随机数 
	      	verifyCode_disabled:true,
	      	Re_verifyCode_status:false,//验证码获取状态 是否正在获取中
	      	reciprocal:60,//30s后重新获取
		}
	},
	beforeCreate () {
	    this.form = this.$form.createForm(this);
	}, 
	created(){
		this.change_captchaImg()
	},
	methods:{
		/*提交表单*/
		handleSubmit (e) {
			let that = this,url 
			e.preventDefault(); 
			this.form.validateFields((err, values) => {  
				if (!err) {
				  console.log('Received values of form: ', values); 
				  register(values).then((res)=>{
				  	if(res.data.flag == true){
				  		 this.$success({
				          title: '您已注册成功，请耐心等待审核，我们将以短信/邮件方式尽快通知您。', 
				          onOk() {
				          	that.$router.push('/login')
				          },
				          okText:'我知道了'
				        }); 
				  	}
				  })
				}
			})
		},
		// finished_fileupload
		finished_upload(e){ 
			let data = this.ReFileCodeToSub(this.fileData) 
			this.form.setFieldsValue({'fileVOList':data})
		},

		//get_captchaImg
		change_captchaImg(){   
			this.random = Math.random()
			this.captchaImg = process.env.BASE_API+'/verify/get_captcha?requestCode='+this.random
		},
		//get_verifyCode
		get_verifyCode(){
			this.verifyCode_disabled = true

			let mobile = this.form.getFieldValue('mobile')
			let captchaCode = this.form.getFieldValue('captchaCode')
			getVerifyCode(mobile,1,captchaCode,this.random).then((res)=>{
				if(res.data.flag == true){
					this.$message.success(res.data.msg) 
					this.Re_verifyCode_status = true
					let num =  setInterval(()=>{ 
						this.reciprocal-- 
						if(this.reciprocal<=0){
							clearInterval(num)
							this.reciprocal=60
							this.Re_verifyCode_status = false
							this.Re_verifyCode()
						} 
					},1000)
				}
				else{
					this.verifyCode_disabled = false
				}
			}).catch((error)=>{
				// console.log(error)
				this.verifyCode_disabled = false
			})
		},
		//手机验证码 （手机号 图形验证码都填写时显示）
		Re_verifyCode(){ 
			let mobile = this.form.getFieldValue('mobile') 
			let captchaCode = this.form.getFieldValue('captchaCode') 
			if(mobile && captchaCode!=''){
				this.verifyCode_disabled = this.Re_verifyCode_status==false? false:true 
			}
			else{
				this.verifyCode_disabled =  true
			} 
		}
	},
	computed: { 
		formItemLayout () {
			const { formLayout } = this;
			return formLayout === 'horizontal' ? {
			labelCol: {md:{span:5},lg:{ span: 7 }},  //label 标签布局
			wrapperCol: {xxl:{ span: 8 },xl:{ span : 11},lg:{ span :14 },md:{ span : 16 },xs:{ span :24}}, //需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
			} : {};
		},
		buttonItemLayout () {
			const { formLayout } = this;
			return formLayout === 'horizontal' ? {
			wrapperCol: { span: 14, offset: 7 },
			} : {};
		}, 
		
		 
	},
	components:{
		fileUpload
	}
}	
</script>

<style scoped="scoped">
.register_bg{background: url(../../assets/img/login_bg.jpg) no-repeat center;height: 100%;padding-top:80px;}
.register_form{width: 1000px;margin:0 auto;background: #fff;padding:30px;max-height: 732px;overflow: auto;}	
</style>